<template>
  <h1 ref="h1">
    {{ props.msg }}
  </h1>

  <h1>{{ count }}</h1>
  <button @click="confirm">
    +
  </button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getLoginInfo } from '@/api/common'
// 在script setup中导入接口类型需要加type
import type { ILoginInfo } from '@/api/types/common'

// list的类型为接口中的slide
const list = ref<ILoginInfo['slide']>([])

getLoginInfo().then(res => {
  list.value = res.slide
})

const props = defineProps({
  msg: {
    type: String,
    default: () => {}
  }
})

const emit = defineEmits(['submit'])

const count = ref(0)

const confirm = () => {
  count.value++
  emit('submit', 1234)
}
</script>
<!-- <script lang="ts">
import { ref, defineComponent, PropType } from 'vue'

interface Obj {
  a: string
  b: number
}

export default defineComponent({
  name: 'HelloWorld',
  props: {
    fun: {
      type: Function as PropType<() => void>,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default: () => {}
    },
    obj: {
      type: Object as PropType<Obj>,
      // 对象或数组默认值必须从一个工厂函数获取
      default: () => {}
    }
  },
  setup: (props) => {
    console.log('🚀 ~ file: HelloWorld.vue ~ line 73 ~ props', props.fun)

    const count = ref<{
        a: number
        b?: string | number
    } | null>(null)

    console.log('🚀 ~ file: HelloWorld.vue ~ line 80 ~ count', count)

    const h1 = ref<HTMLHeadElement| null>(null)
    console.log('🚀 ~ file: HelloWorld.vue ~ line 89 ~ h1', h1.value?.click)

    return { count, h1 }
  }
})
</script> -->

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
